<template>
	<div class="ywgzt-container" style="background: #243e5d">
		<yd-table
			:formData="extendData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="handlerSearch"
			@currentChangeHandler="handlerSearch"
			@sortChangeHandler="handlerSearch"
		></yd-table>
	</div>
</template>

<script setup name="dialogs" lang="tsx">
import { stepToBaseAlarmList } from '@/api/ops-workbench/business-alarm-analysis/index';
import useCurrentInstance from '@/utils/useCurrentInstance';
import { ref, reactive } from 'vue';

const { proxy } = useCurrentInstance();
const props = defineProps({
	params: {
		type: Object,
		default: () => {},
	},
});

// 表单额外参数
const extendData = reactive({
	systemId: '',
	businessCode: '',
});
// 列表配置
const tableConfig = reactive({
	columns: [
		{
			label: '所属步骤',
			prop: 'stepName',
		},
		{
			label: '告警类型',
			prop: 'alarmIndicatorName',
		},
		{
			label: '告警级别',
			prop: 'alarmLevelName',
			width: '80',
		},
		{
			label: '告警时间',
			prop: 'alarmTriggerTime',
			width: '150',
		},
		{
			label: '所属网端',
			prop: 'segmentName',
		},
		{
			label: '请求IP',
			prop: 'requestIp',
		},
		{
			label: '响应IP',
			prop: 'responseIp',
		},
		{
			label: '告警对象',
			prop: 'alarmObject',
		},
		{
			label: '告警现象',
			prop: 'alarmContext',
		},
		{
			label: '专属指标',
			prop: 'exclusiveIndicator',
		},
	],
	pagination: {
		pageSize: 10,
		pageNum: 1,
		total: 0,
	},
	loading: true,
	alarmType: true,
});
// 列表数据
const tableData = ref([]);
const searchData = ref({
	...props.params,
});

function reloadList(e: anyObj) {
	searchData.value = e;
	handlerSearch();
}
function handlerFormInited() {
	handlerSearch();
}
// 搜索
function handlerSearch() {
	const formData = {
		...extendData,
		...searchData.value,
	};
	tableConfig.loading = true;
	stepToBaseAlarmList(formData).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code === 0) {
			tableData.value = res.data.data;
			tableConfig.pagination.total = res.data.total;
		} else {
			tableData.value = [];
			tableConfig.pagination.total = 0;
			proxy.$modal.msgError(res.msg);
		}
	});
}

defineExpose({
	reloadList: reloadList,
});
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
:deep(.el-pagination) {
	text-align: center;
	margin-top: 10px;
}
</style>
